<html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  <head>
    <title>易盾验证码-DEMO</title>
    <!-- 演示用js/css，非组件依赖 -->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <!-- <link href='//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css' rel='stylesheet'> -->
  </head>
  
  <body>
    <form style="max-width: 320px; margin: 120px auto;" action="/login" method="post">
      <div id="captcha_div"></div>
    </form>
    <!-- 验证码组件js -->
    <!-- <script src="//c.dun.163yun.com/js/c.js"></script> -->
    <script src="./demo.js"></script>
    <script>
      // 验证码组件初始化
      $(function () {
        //获取ID
        getCapthaId();
        function getCapthaId() {
          initNECaptcha('f526410c09b44c81944e186721e4d091')
              return;
          $.ajax({
            url: 'GetCaptchaId.ac',
            type: 'POST',
            dataType: "text",
            success: function (res) {
              
           if(res!='NO'){
              initNECaptcha(res)
            }else{
              setTimeout(function(){
                getCapthaId();
              },1500)
             
           }
            }
          })
  
        }
        //初始化
        function initNECaptcha(captchaId) {
          var opts = {
            "element": "captcha_div", // 可以是验证码容器id，也可以是HTMLElement
            //  "captchaId": "f526410c09b44c81944e186721e4d091", // 这里填入申请到的验证码id
            captchaId: captchaId,
            "width": 320, // 验证码组件显示宽度
            "initCallback": function (res) {
              console.log('初始化成功啊');
              console.log($('.ncpt_puzzle_bg img').html(), '----')
            },
            "verifyCallback": function (ret) { // 用户只要有拖动/点击，就会触发这个回调
              // console.log(ret)
              return;
              // drag_div.style.left = "0px";
              if (ret['value']) { // true:验证通过 false:验证失败
                $.ajax({
                  url: 'SetCheckRes.ac',
                  type: 'POST',
                  data: {
                    capthaId: capthaId,
                    key: JSON.stringify(ret)
                  },
                  dataType: "text",
                  success: function (res) {
  
                  }
                })
              }else{
              submitImgUrl();
              }
            }
          }
          let d = new NECaptcha(opts);
        // submitImgUrl();
          initDrag(100)
        }
  
        // 提交图片地址
        function submitImgUrl() {
          setTimeout(function () {
            var doc = document.querySelectorAll('.ncpt_puzzle_bg')[1].firstChild;
            var imgUrl = $(doc).attr('src');
            $.ajax({
              url: 'SetUrl.ac ',
              type: 'POST',
              data: {
                picurl: imgUrl
              },
              dataType: "text",
              success: function (res) {
                if(res=='OK'){
                  getPostionLength();
                }
              
              }
            })
  
          },2000);
        }
  
        //获取长度
        function getPostionLength() {
          $.ajax({
            url: 'GetSlideLen.ac ',
            type: 'POST',
            dataType: "text",
            success: function (res) {
            if(res!=0){
             initDrag(res)
            }else{
              setTimeout(function(){
                getPostionLength();
              },1000)
             
            }
            }
          })
        }
  
        //  准备拉取
        function initDrag(len) {
        
          setTimeout(function () {
            var doc = document.querySelectorAll('.ncpt_puzzle_bg')[1].firstChild;
            var smallImg = document.querySelectorAll('.ncpt_puzzle_fg')[0];
            var drag_div = document.querySelector(".ncpt_slide_fg img");
  
            var drag = new Drag(drag_div, {
              handle: drag_div,
              moveLen:len,
              smallImg:smallImg
            });
            var event1 = document.createEvent('HTMLEvents');
            var event2 = document.createEvent('HTMLEvents');
            var event3 = document.createEvent('HTMLEvents');
            event1.initEvent("mousedown", true, true);
            event2.initEvent("mousemove", true, true);
            event3.initEvent("mouseup", true, true);
  
            //   var evDownObj = new Event('mousedown');
            drag_div.dispatchEvent(event1);
  
            //   var evMoveObj = new Event('mousemove');
            drag_div.dispatchEvent(event2);
  
            //  var evUpObj = new Event('mouseup');
            drag_div.dispatchEvent(event3);
          }, 1000)
        }
  
  
  
  
  
  
        function Drag() {
          this.initialize.apply(this, arguments);
        }
        Drag.prototype = {
          // 初始化  
          initialize: function (element, options) {
            this.element = this.$(element); // 被拖动的对象  
            this._x = this._y = 0; // 鼠标在元素中的位置  
            this._moveDrag = this.bind(this, this.moveDrag);
            this._stopDrag = this.bind(this, this.stopDrag);
            // 设置参数  
            this.setOptions(options);
            // 设置鼠标去“拖”的“柄”对象（注意与被拖动的对象区别）  
            this.handle = this.$(this.options.handle);
            // 设置回调函数  
            this.onStart = this.options.onStart;
            this.onMove = this.options.onMove;
            this.onStop = this.options.onStop;
            this.moveLen=this.options.moveLen;
            this.smallImg=this.options.smallImg;
            this.handle.style.cursor = "move";
           this.changeLayout();
            // 注册开始拖动事件  mousemove
  
            // this.addHandler(this.handle, "touchstart", this.bind(this, this.startDrag));
            this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag));
            this.addHandler(this.handle, "mousemove", this.bind(this, this.moveDrag));
            this.addHandler(this.handle, "mouseup", this.bind(this, this.stopDrag));
  
          },
  
          // 改变被拖动对象的布局属性  
          changeLayout: function () {
            // this.element.style.top = this.element.offsetTop + "px";
           // this.element.style.left = this.moveLen + "px";
            this.$(this.smallImg).style.left = this.moveLen + "px";
            this.element.style.left = this.element.offsetLeft + "px";
            this.element.style.position = "absolute";
            this.element.style.margin = "0";
          },
  
          startDrag: function (event) {
            var event = event || window.event;
  
            this.element.detachEvent
            console.log('开始')
  
            this._x = event.clientX - this.element.offsetLeft;
            this._y = event.clientY - this.element.offsetTop;
  
            this.addHandler(this.element, "mousemove", this._moveDrag);
  
            this.addHandler(this.element, "mouseup", this._stopDrag);
  
            this.preventDefault(event);
  
            this.handle.setCapture && this.handle.setCapture();
  
            this.onStart();
          },
          moveDrag: function (event) {
            var event = this.getEvent(event);
            var _this=this;
           console.log('移动中',_this.moveLen)
            //var iTop = event.clientY - this._y;  
            // var iLeft = event.clientX - this._x;  
            //可在此处设定元素拖动之后的位置
           // this.element.style.left = this.moveLen + "px";
         //  this.$(this.smallImg).style.left = this.moveLen + "px";

            $(this.element,this.smallImg).animate({
              left:_this.moveLen
            },200,function(){
              _this.moveLen=0;
            })




            this.onMove();
          },
          stopDrag: function () {
             //  this.element.style.top = 100 + "px";
          
            this.removeHandler(this.element, "mousemove", this._moveDrag);
            this.removeHandler(this.element, "mouseup", this._stopDrag);
            this.handle.releaseCapture && this.handle.releaseCapture();
            // $(this.element).unbind();
            console.log('结束',this.moveLen)
            
            this.onStop()
  
          },
          setOptions: function (options) {
            let _this = this;
            _this.options = {
              handle: _this.element, //事件对象  
              onStart: function () {}, // 开始时回调函数  
              onMove: function () {}, // 拖拽时回调函数  
              moveLen:0,
              smallImg:'',
              onStop: function () {
                setTimeout(function () {
                  _this.element.style.left = 0 + "px";
               }, 1000)
  
              } // 停止时回调函数  
            };
            for (var p in options) {
              this.options[p] = options[p];
            }
          },
          $: function (id) {
            return typeof id === "string" ? document.getElementById(id) : id;
          },
          addHandler: function (element, eventType, handler) {
            if (element.addEventListener) {
              return element.addEventListener(eventType, handler, false);
            } else {
              return element.attachEvent("on" + eventType, handler);
            }
          },
          removeHandler: function (element, eventType, handler) {
            if (element.removeEventListener) {
              return element.removeEventListener(eventType, handler, false);
            } else {
              return element.detachEvent("on" + eventType, handler);
            }
          },
          getEvent: function (event) {
            return event || window.event;
          },
          preventDefault: function (event) {
            if (event.preventDefault) {
              event.preventDefault();
            } else {
              event.returnValue = false;
            }
          },
          bind: function (obj, handler) {
            return function () {
              return handler.apply(obj, arguments);
            }
          },
          touchstart: function (e) {
  
          },
        };
  
  
      })
    </script>
  </body>
  
  </html>